<template>
  <div class="search"></div>
  <div class="echart">
    <Chart :width=store.echarts22.width :height=store.echarts22.height :options="store.echarts22.options"></Chart>
  </div>
  <div class="table">
    <div class="top">
      <div class="left"> 成交商机：1000， 成交金额：¥ 1,000,000.00</div>
      <div class="right"></div>
    </div>
    <el-table :data="tableData" stripe :border="true" :size="large" :row-style="{ height: '50px' }">
      <el-table-column prop="date" label="时间" />
      <el-table-column prop="num" label="成交数量" />
      <el-table-column prop="zengzhang1" label="成交数量环比增长" />
      <el-table-column prop="jine" label="成交金额" />
      <el-table-column prop="zengzhang2" label="成交数量环比增长" />
      <el-table-column prop="danjia" label="平均客单价" />
    </el-table>
  </div>
  <div class="reg">
    <p>Copyright © www.AxureUX.com, All Rights Reserved.</p>
    <p>专业的交互原型素材原创分享平台</p>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Chart from '../../components/MyEcharts'
import { useStore } from '../../store/zsz/index'
const store = useStore()
const tableData = [
  {
    date: '2019-01',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-02',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-03',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-04',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-05',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-06',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-07',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-08',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-09',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-10',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-11',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  },
  {
    date: '2019-12',
    num: 1000,
    zengzhang1: '10.4%',
    jine: '￥1000000.00',
    zengzhang2: '10.4%',
    danjia: '￥1000000.00'
  }
]
</script>

<style lang='scss' scoped>
.search {
  height: 110px;
  background-color: white;
}

.echart {
  height: 440px;
  background-color: white;
  margin: 14px 0;
}

.table {
  padding: 0px 20px;
  height: 780px;
  background-color: white;
  width: 100%;


  .top {
    height: 80px;
    line-height: 80px;
    color: #666666;
  }

  .main {
    height: calc(900px - 80px);
  }
}

.reg {
  text-align: center;
  color: #cccccc;
  padding-top: 30px;
  margin-top: 20px;
  height: 140px;
  font-size: 14px;
}
</style>